<template>
    <el-card class="!border-none " shadow="never">
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            
            
            <div class="grid grid-cols-3 gap-1">
                <div>
                    <el-form-item label="物流单号">
                        <el-input
                            placeholder="请输入物流单号"
                            
                            class="w-64"
                            v-model="queryFormData.logisticNumber"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="sn">
                        <el-input
                            class="w-64"
                            placeholder="请输入用户交易订单号"
                            
                            v-model="queryFormData.sn"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div class="flex flex-1 flex-row-reverse">
                    <el-form-item>
                        <div class="flex-1  flex flex-row-reverse  w-full ">
                            <el-button class="mx-2" type="primary" @click="getPageLists">查询</el-button>
                            <el-button class="mx-2" @click="resetParams">重置</el-button>
                        </div>
                    
                    </el-form-item>
                </div>
            
            </div>
        
        
        </el-form>
    </el-card>
    
    <el-card class="!border-none mt-5" shadow="never">
        <div>
            <el-button type="primary" @click="handleCreateWarehousingOrder()">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                创建入库单
            </el-button>
        
        
        </div>
        
        
        <el-table
            ref="tableRef"
            class="mt-4"
            size="large"
            v-loading="pagerData.loading"
            :data="pagerData.lists"
            row-key="id"
        >
            <el-table-column label="sn" fixed prop="sn" min-width="180"/>
            <el-table-column label="入库仓" fixed prop="warehouse" min-width="180">
                <template #default="{ row }">
                    <ScSignSvgRound :value="formatterManager.formatterWarehouse(row)"/>
                </template>
            
            </el-table-column>
            
            <el-table-column label="物料状态" prop="status" min-width="120">
                <template #default="{ row }">
                    
                    <el-tag v-for="(item,index) in afterSaleOrderConfig.afterSaleOrderStatus"
                            v-show="row.status === item.code"
                            :key="index"
                            :disable-transitions="true"
                            :type="item.type">
                        {{ item.name }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="订单号" prop="orderNumber" :show-overflow-tooltip="true" min-width="200"/>
            <el-table-column label="工单号" prop="afterSaleOrderNo" min-width="170"/>
            
            <el-table-column label="69码" prop="batch" min-width="180"/>
            
            <el-table-column label="物料名称" prop="itemName" min-width="180"/>
            <el-table-column label="物料编码" prop="itemCode" min-width="180"/>
            
            
            <el-table-column label="操作" width="170" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="handleRowDetail(row)"
                    >
                        详情
                    </el-button>
                    
                    <el-button
                        type="primary"
                        link
                        @click="callbackOrderLine(row)"
                    >
                        打回
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination v-model="pagerData" @change="getPageLists"/>
    
    </el-card>
    
    
    <Detail ref="detailRef" @close="showDetailRef=false" v-if="showDetailRef"/>
    <Edit ref="editRef" @confirm="getPageLists" @close="showEditRef=false" v-if="showEditRef"/>

</template>

<script lang='ts' setup>


import {usePagerManager} from "@/manager/base/PagerManager";

import feedback from "@/utils/feedback";
import Detail from '@/components/order-detail/detail.vue'
import {getWaitWarehouseList} from "@/api/afterSale/order/AfterSaleOrderListController";
import {UnwrapNestedRefs} from "@vue/reactivity";

import {AfterSaleOrderDetailDTO} from "@/api/afterSale/order/dto/AfterSaleOrderDetailDTO";
import {useFormatterManager} from "@/manager/base/FormatterManager";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import AfterSaleOrderLineSearchRequest from "@/api/afterSale/order/request/AfterSaleOrderLineSearchRequest";
import Edit from "@/views/afterSaleOrder/warehous/list/edit.vue";
import AfterSaleWarehouseCallBackRequest from "@/api/afterSale/warehouse/request/AfterSaleWarehouseCallBackRequest";
import {warehouseCallbackOrderLine} from "@/api/afterSale/warehouse/AfterSaleWarehouseController";
import {AfterSaleIWarehouseMaterialDTO} from "@/api/afterSale/order/dto/AfterSaleIWarehouseMaterialDTO";

let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);


const editRef = shallowRef(Edit)
const showEditRef = ref(false)

const detailRef = shallowRef(Detail)
const showDetailRef = ref(false)

// 查询请求数据
let queryFormData: UnwrapNestedRefs<AfterSaleOrderLineSearchRequest> = reactive(new AfterSaleOrderLineSearchRequest())

// 分页数据
const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getWaitWarehouseList,
    params: queryFormData
})


// ------------------------------------------ ** 处理新增入库单据弹窗 ** ------------------------------------------------------------------------------------


/**
 * 创建入库工单
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
async function handleCreateWarehousingOrder() {
    showEditRef.value = true
    await nextTick()
    editRef.value?.open()
}

/**
 *  物料打回
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
function callbackOrderLine(row: AfterSaleIWarehouseMaterialDTO) {
    
    feedback.prompt("请简单描述需要打回质检遇到的问题", "仓库打回").then(item => {
        let afterSaleWarehouseCallBackRequest = new AfterSaleWarehouseCallBackRequest();
        afterSaleWarehouseCallBackRequest.afterSaleOrderLineId = row.afterSaleOrderLineId
        afterSaleWarehouseCallBackRequest.afterSaleOrderId = row.afterSaleOrderId
        afterSaleWarehouseCallBackRequest.warehouseReturnCause = item.value
        warehouseCallbackOrderLine(afterSaleWarehouseCallBackRequest).then(r=>{
            feedback.notifySuccess("该物料已打回重新质检")
            getPageLists()
        })
    })
}


// ------------------------------------------ ** 处理详情 ** ------------------------------------------------------------------------------------


/**
 *  处理详情页
 *
 * @author 徐寿春
 * 2023/4/6 13:45
 */
async function handleRowDetail(row: AfterSaleOrderDetailDTO) {
    showDetailRef.value = true
    await nextTick()
    detailRef.value?.open(row.afterSaleOrderId)
}


/**
 * 获取工单列表
 */
onMounted(() => {
    getPageLists()
    
})


</script>

